<template>
    <div class="thumb_item">
        <!-- <el-image
            v-if="false"
            @click.stop="on_icon"
            src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/f056974e2f1012fcf1ca15cc3b11e46f1be77220764fc22095a0dd90da9b6dacafae0f14212e07c6fbd0ea884ff37a09?pictype=scale&from=30013&version=3.3.3.3&uin=2978968560&fname=634654d4485c.jpg&size=256"/> -->
        <i :class="[
                data_obj.fileType ? get_fileicon_by_type(data_obj.fileType) : get_fileicon_by_name(data_obj.fileName || data_obj.hadoopFileName),
                'icon',
            ]">
        </i>
        <div class="name" @click.stop="on_filename">
            {{get_file_name(data_obj.fileName) || get_file_name(data_obj.hadoopFileName)}}
        </div>
    </div>
</template>

<script>
import {get_fileicon_by_type} from '@/common/my_tools'
export default { //缩略图模式显示时的item(只包含文件名及图标部分)
    name: 'Thumb_item',
    props:{
        data_obj:{ //数据对象
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data(){
        return{
        };
    },
    methods:{
        on_item(){ //组件点击事件
            console.log(1);
        },
        get_file_name(name){
            if(name){
                let names = name.split('.')
                names.pop()
                return names.join('.');
            }
        },
        on_filename(){ //文件名称点击事件
            switch(this.data_obj.fileType){
                case 'folder':
                    this.$router.push('/disk/folder');
                    break;
            }
        },
        on_icon(){ //文件图标点击事件
            console.log(3);
        },
        get_fileicon_by_name(name){ //根据文件名获取文件类型
            let _list = name.split('.');
            return this.get_fileicon_by_type(_list[_list.length-2]);
        },
        get_fileicon_by_type(_type){ //根据文件类型获得问价图标类名
            return get_fileicon_by_type(_type);
        },
    },
}
</script>

<style scoped lang='scss'>
.thumb_item{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:center;
    i{
        margin-top: 15px;
        width: 115px;
        height: 115px;
        cursor: pointer;
    }
    >.name{
        text-align: center;
        font-size: 14px;
        color: #020202;
        line-height: 19px;
        margin-bottom: 15px;
        cursor: pointer;
        transition: all 0.2s;
        &:hover{
            text-decoration: underline;
        }
    }
    .el-image{
        margin-top: 15px;
        cursor: pointer;
        width: 135px;
        height: 135px;
        display: flex;
        justify-content: center;
        align-items: center;
        /deep/img{
            width:auto;
            height:auto;
            max-width:100%;
            max-height:100%;
            border-radius: 3px;
            background-color: #dee5e9;
        }
    }
}
</style>
